.besoins{
	width:100%;
	height:100%;
	}
	
.noise {
position: absolute;
    left: -500px;
    right: -500px;
    top: -500px;
    bottom: -500px;
    background: url(/img/noise.png);
    animation: epileptic 2s steps(1) infinite;
	background-color:#111;
}
.tile.p2 div::after{
  z-index:-2;
  position:absolute;
  width:100%;
  bottom:0;
  display:block;
  background:rgba(255, 255, 255, 0.05);
  height:100%;
  content:"";
  transform:rotate(20deg);
  left:0;
  transition:all ease .3s;
  -webkit-transition:all ease .3s;
}

/*????*/


#vous{
width:100%;
  height:760px;
  animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay:2s;
    animation-fill-mode: both;
}

#vous .tiles {
	position:absolute;
    height: 620px;
	top:0;
	left:0;
	right:0;
	bottom:0;
	text-align:center
}




.tile h5{
  font-size:24px;
  color:#333333;
}
.tile.p2 h5{
  color:#333;
  font-size:16px;
  padding-bottom: 40px;
}
.tilesWrapper {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1;
	perspective:2000px;
	transform-style:preserve-3d;
	-moz-transform-style:flat
}


.tile {
	display:block;
	position:absolute;
	top:70px;
	left:0;
	right:0;
	bottom:140px;
	margin:auto;
	width:380px;
	height:380px;
	z-index:1;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	transition:0.6s cubic-bezier(0.7, 0, 0.3, 1);
	transform-origin:50% -80px;
	transform-style:preserve-3d;
	-moz-transform-style:flat
}
@media (max-width: 1440px) {
	.tile {
	width:350px;
	height:350px
}
  .tile.p2 div::after{
  z-index:-2;
  position:absolute;
  width:100%;
  bottom:0;
  display:block;
  background:rgba(255, 255, 255, 0.05);
  height:100%;
  content:"";
  transform:rotate(20deg);
  left:0;
}

}

@media (max-width: 425px) {
	.tile {
	top:0;
	width:100%;
	height:280px
}
}
.tile div {
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	transition:0.3s cubic-bezier(0.6, 0, 0.3, 1.5)
}
@media (max-width: 425px) {
	.tile div {
	margin:0 20px
}
}
.l .tile div {
	transform:rotateY(30deg)
}
.r .tile div {
	transform:rotateY(-30deg)
}


.tile div:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: #fff 3px solid;
    bottom: 0;
    margin: auto;
    background: rgba(255, 255, 255, 0.45);
    opacity: .7;
    transition: 0.6s cubic-bezier(0.7, 0, 0.3, 1);
    transform: rotate(45deg);
    z-index: -1;
}
@media (max-width: 1440px) {
	.tile div:before {
	top:20px;
	left:20px;
	right:20px;
	bottom:20px
}
}
@media (max-width: 425px) {
	.tile div:before {
	width:200px;
	height:200px;
	opacity:1
}
}
.tile:hover div:before {
	opacity:.9;
	transition:.3s
}
@media (max-width: 425px) {
	.tile:hover div:before {
	opacity:1
}
}
.tile span {
	display:block;
	position:absolute;
	bottom:0;
	margin:auto;
	width:90px;
	height:50px
}
@media (max-width: 1440px) {
	.tile span {
	display:none
}
}
.tile span.l {
	top:-28px;
	left:-55px;
	transform:rotate(-45deg)
}
.tile span.r {
	top:28px;
	right:-55px;
	transform:rotate(135deg)
}
.tile span:before,.tile span:after {
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	background:#fff;
}
.tile span:before {
	right:0;
	height:1px;
	transform:scaleX(0);
	transform-origin:100% 0;
	transition:.3s .2s
}
.tile span:after {
	bottom:0;
	width:1px;
	transform:scaleY(0);
	transform-origin:0 0;
	transition:.3s
}
.tile.p2 {
	-webkit-user-select:text;
	-moz-user-select:text;
	-ms-user-select:text;
	user-select:text;
	cursor:default
}
.tile.p2 div:before {
	background:rgba(255, 255, 255, 0.45);
	opacity:1;
	box-shadow:15px 0 20px 0 rgba(173,178,192,0.2);
	transition:0.6s cubic-bezier(0.7, 0, 0.3, 1);
      border:#e46409 3px solid;
}
.tile.p2 span:before {
	transform:scaleX(1);
	transition-delay:.6s
}
.tile.p2 span:after {
	transform:scaleY(1);
	transition-delay:.8s
}
.tile.p0 {
	opacity:0;
	transform:scale(0.6) translateX(-1200px)
}
.tile.p1 {
	transform:scale(0.6) translateX(-600px)
}
@media (max-width: 1440px) {
	.tile.p1 {
	transform:scale(0.6) translateX(-500px)
}
}
@media (max-width: 1024px) {
	.tile.p1 {
	transform:scale(0.6) translateX(-450px)
}
}
@media (max-width: 425px) {
	.tile.p1 {
	transform:none
}
}
.tile.p3 {
	transform:scale(0.6) translateX(600px)
}
@media (max-width: 1440px) {
	.tile.p3 {
	transform:scale(0.6) translateX(500px)
}
}
@media (max-width: 1024px) {
	.tile.p3 {
	transform:scale(0.6) translateX(450px)
}
}
@media (max-width: 425px) {
	.tile.p3 {
	transform:none
}
}
.tile.p4 {
	opacity:0;
	transform:scale(0.6) translateX(1200px)
}
@media (max-width: 425px) {
	.tile.left {
	opacity:0;
	transform:translateX(-150px)
}
.tile.right {
	opacity:0;
	transform:translateX(150px)
}
}
.tile img {
  display:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	transform:translateY(100px) scale(1.3);
	transition:0.6s cubic-bezier(0.7, 0, 0.3, 1)
}
@media (max-width: 1440px) {
	.tile img {
	margin-top:20px;
	height:90px
}
}
.tile h2 {
	margin:0;
  margin-bottom:0px;
  margin-top:150px;
	color:#111111;
	font-size:28px;
  font-weight:normal;
	line-height:1.5
}
@media (max-width: 425px) {
	.tile img {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	height:120px;
	transform:none
}
}
.tile h2 {
	margin:0;
  margin-bottom:0px;
  margin-top:120px;
	color:#111111;
	font-size:28px;
  font-weight:normal;
	line-height:1.5
}
.tile h5:after{
    content:'';
	display:block;
	height:3px;
	width:40px;
    margin:0 auto;
    margin-top:10px;
	background:#eb6100;
  transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
}
.tile:hover h2:after{
    width:60px; 
}

@media (max-width: 1440px) {
	.tile h2 {
	margin-bottom:10px
}
}
@media (max-width: 425px) {
	.tile h2 {
	margin-top:340px;
	color:#03142f
}
}
.tile h2,.tile p {
	opacity:0;
	transition:.3s
}
.tile h2{
opacity:1;
  font-size:40px;
  
}
@media (max-width: 425px) {
	.tile h2,.tile p {
	opacity:1
}
}
@media (max-width: 425px) {
	.tile br {
	display:none
}
}
.tile.p2 img {
	transform:none
}
.tile.p2 h2,.tile.p2 p {
	opacity:1;
	transition-delay:.3s;
}
.tile.p2 p {
    opacity: 1;
    transition-delay: .3s;
    color: #fff;
    font-size:16px;
}
.tile.p2 h2{
    opacity: 1;
    transition-delay: .3s;
    font-size: 30px;
  margin-top:80px;
}
.tiles>img {
	position:absolute;
    width:1200px;
    height:620px;
	top:50%;
	left:50%;
  display:none;
	margin:0 auto;
    margin-left:-600px;
  margin-top:-310px;
	max-height:100%;
	transition:0.6s cubic-bezier(0.7, 0, 0.3, 1)
}
@media (max-width: 425px) {
	.tiles>img {
	height:250px;
	top:15px;
	left:50%;
	bottom:auto;
	transform:translateX(-50%)
}
}
.tiles>img.i0 {
	opacity:0;
	transform:scale(0.7) translateX(-500px)
}
@media (max-width: 425px) {
	.tiles>img.i0 {
	opacity:1;
	transform:translateX(-50%)
}
}
.tiles>img.i2 {
	opacity:0;
	transform:scale(0.7) translateX(500px)
}
@media (max-width: 425px) {
	.tiles>img.left {
	opacity:0;
	transform:translateX(-70%)
}
.tiles>img.right {
	opacity:0;
	transform:translateX(-30%)
}
}


.sy4_more{
  width: 32px; 
  height: 32px; 
  margin: 0 auto;  
  display: block; 
  background:url(/img/jiafa_23.png) no-repeat center center; 
  border:solid 1px #fff; 
  transition: all 1s;
  margin-top:20px;
}
.sy4_more:hover{

  background:url(/img/jiafa_23.png) #eb6100 no-repeat center center; 
  border:solid 1px #eb6100; 
  border-radius:32px;
}

@keyframes ghostUpdown{
  from{margin-top:10px;} to{margin-top:-10px;} 
}


/*????*/



/*??????????